<template>
    <view  class="body" v-if="SHOW">
    <!-- <view  :class="{ body :true, animated:true , fadeIn :  SHOW ? true : false,  fadeOut : SHOW ? false : true, }" v-if="SHOW"> -->
        <!-- <view class="container" :style="{ zIndex: !SHOW ? '-1000' : '10' }"> -->
        <view class="container" >
            <view class='progress_box'>
                <view 
                :class="{ shanxing : istrue,  'shanxing1'  :  ((percent < 50 && percent != 0) || percent == 100) ? true : false , 'shanxing2' : ((percent < 50 && percent != 0) || percent == 100) ? false : true }">
                    <view v-if="percent != 0 && percent != 100" class="sx1"></view>
                    <view 
                    v-if="percent != 50 && percent != 0 && percent != 100" 
                    class="sx2"
                    :style="{transform:'rotate(' + (percent < 50 ? ((360 * percent / 100) - 180):(360 * (percent - 100) / 100)) + 'deg)'}"></view>
                    <view class="sx_t">
                        {{percent}}%
                    </view>
                </view>
           </view>
           <view  class="tips-text">正在打开...</view>
       </view>
    </view>
</template>

<script>
export default {
    data(){
       return{
          x:null,
          y:null,
          r:null,
          progress_txt:0,
          SHOW: false, //是否显示
          strokeWidth:null,
          fontSize:null,
          istrue:true,
       }
    },
	props:{
		percent:{
			type: Number,
			default:0
        },
    },
    watch:{
        percent(value){
            if(value > this.progress_txt || value == 0){
                this.progress_txt =  value
                // this.drawCircle(value/(60));
            }
        },     
    },
	onReady: function() {
        
    },
    created(){
        
    },
    mounted(){
        // const query = uni.createSelectorQuery().in(this);
        // let _this  = this;
        // query.select('.progress_box').boundingClientRect(data => {
        //     _this.x =  data.width/2
        //     _this.y =  data.height/2
        //     _this.r =  data.width/2 - 5
        //     _this.drawProgressbg(data.width/2,data.height/2, data.width/2 - 5 );
        // }).exec();

        // let fontSize = 28 * (wx.getSystemInfoSync().windowWidth / 750)   //转px
        // this.fontSize =  fontSize
        // this.strokeWidth = 6 * (wx.getSystemInfoSync().windowWidth / 750)
    },
	methods: {
        touchMove(){
            
        },
        touchStart(){

        },
        touchEnd(){

        },
        //显示
        show(){
            var _this = this;
            return new Promise(function(resolve, reject){
                _this.percent = 0
                _this.SHOW = true;
                resolve();
            });
        },
        //隐藏
        hide(){
            var _this = this;
            return new Promise(function(resolve, reject){
                _this.SHOW = false;
                _this.percent = 0
                resolve();
            });
        },
		drawProgressbg: function(x,y,r){
            // 使用 wx.createContext 获取绘图上下文 context
            var ctx = wx.createCanvasContext('canvasProgressbg',this)
            ctx.setLineWidth(3);// 设置圆环的宽度
            ctx.setStrokeStyle('#FFFFFF'); // 设置圆环的颜色
            ctx.setLineCap('round') // 设置圆环端点的形状
            ctx.beginPath();//开始一个新的路径
            ctx.arc(x,y,r, 0, 2 * Math.PI, false);
            //设置一个原点(110,110)，半径为100的圆的路径到当前路径
            ctx.stroke();//对当前路径进行描边
            ctx.draw();
        },
        drawCircle: function (step){  
            var context = wx.createCanvasContext('canvasProgress',this);
            // 设置渐变
            var gradient = context.createLinearGradient(200, 100, 100, 200);
            gradient.addColorStop("0", "#00C759");
            gradient.addColorStop("0.5", "#00C759");
            gradient.addColorStop("1.0", "#00C759");
            
            context.setLineWidth(4);
            context.setStrokeStyle(gradient);
            context.setLineCap('round')
            context.beginPath(); 
            // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
            context.arc(this.x, this.y, this.r, -Math.PI / 2, step * Math.PI - 0.5, false);
            context.stroke(); 
            context.draw() 
        },
	}
};
</script>

<style>

    .body{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000000000000000000000;
    }
    .container{
        position: fixed;
        width:244rpx;
        height: 244rpx; 
        background: rgba(0, 0, 0, 0.7);
        border-radius: 24rpx;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        z-index: 1000000000000000000001;
    }
	.progress_box{
        /* position: relative; */
        /* width:244rpx;
        height: 244rpx;  */
        /* border-radius: 24rpx; */
        width: 140rpx;
        height: 140rpx;
        display: flex;  
        align-items: center;
        justify-content: center;
        margin: 30rpx  auto 14rpx;
        font-size: 28rpx;
    }
   
    .shanxing {
        width: 120rpx;
        height: 120rpx;
        margin: 6rpx auto;
        position: relative;
        border-radius: 60rpx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sx1, .sx2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 120rpx;
        height: 120rpx;
        clip: rect(0rpx, 60rpx, 120rpx, 0rpx);
    }

    .sx1 {
        z-index: 1;
    }

    .sx2 {
        z-index: 2;
    }

    .sx_t {
        width: 100rpx;
        height: 100rpx;
        border-radius: 60rpx;
        z-index: 3;
        background:#4c4c4c;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 100rpx;
        text-align: center;
    }

    .shanxing1 {
        background:rgba(0, 199, 89, 1);
    }

    .shanxing1 .sx1, .shanxing1 .sx2 {
        background: #ccc;
    }

    .shanxing2 {
        background: #ccc;
    }

    .shanxing2 .sx1, .shanxing2 .sx2 {
        background: rgba(0, 199, 89, 1);
        transform: rotate(180deg);
    }
    .tips-text{
        height: 42rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 42rpx;
        text-align: center;
    }


</style>
